<template>
  <div class="student-manage">
    <!-- 搜索区域 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="学生姓名">
          <el-input v-model="searchForm.name" placeholder="请输入学生姓名" clearable />
        </el-form-item>
        <el-form-item label="班级">
          <el-select 
            v-model="searchForm.className" 
            placeholder="请选择班级" 
            clearable
            style="width: 200px">
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select 
            v-model="searchForm.status" 
            placeholder="请选择状态" 
            clearable
            style="width: 150px">
            <el-option label="已激活" value="1" />
            <el-option label="未激活" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>搜索
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table 
      :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)" 
      style="width: 100%"
      :height="600"
      border>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="学生姓名"  />
      <el-table-column prop="className" label="班级名称"  />
      <el-table-column prop="email" label="邮箱"/>
      <el-table-column prop="registerTime" label="注册时间" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status ? 'success' : 'info'">
            {{ scope.row.status ? '已激活' : '未激活' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="220">
        <template #default="scope">
          <el-button 
            :type="scope.row.status ? 'warning' : 'success'"
            :icon="scope.row.status ? Lock : Unlock"
            circle
            @click="handleActivate(scope.row)"
            :title="scope.row.status ? '禁用' : '激活'"
          />
          <el-button 
            type="primary" 
            :icon="Key"
            circle
            @click="handleResetPassword(scope.row)"
            title="重置密码"
          />
          <el-button 
            type="danger" 
            :icon="Delete"
            circle
            @click="handleDelete(scope.row)"
            title="删除"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Search, Refresh, Lock, Unlock, Key, Delete } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 搜索表单
const searchForm = ref({
  name: '',
  className: '',
  status: ''
});

// 班级选项
const classOptions = [
  { value: '计算机科学1班', label: '计算机科学1班' },
  { value: '计算机科学2班', label: '计算机科学2班' },
  { value: '软件工程1班', label: '软件工程1班' }
];

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 模拟数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    className: '计算机科学1班',
    email: 'zhangsan@example.com',
    registerTime: '2024-01-01 10:00:00',
    status: true
  },
  {
    id: 2,
    name: '李四',
    className: '计算机科学2班',
    email: 'lisi@example.com',
    registerTime: '2024-01-02 14:30:00',
    status: false
  }
]);

// 计算总数
total.value = tableData.value.length;

// 搜索
const handleSearch = () => {
  // 这里添加搜索逻辑
  ElMessage.success('搜索成功');
};

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    name: '',
    className: '',
    status: ''
  };
  // 重置后可以自动搜索
  handleSearch();
};

// 激活/禁用账号
const handleActivate = (row) => {
  const action = row.status ? '禁用' : '激活';
  ElMessageBox.confirm(
    `确定要${action}该学生账号吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      row.status = !row.status;
      ElMessage.success(`${action}成功`);
    })
    .catch(() => {
      ElMessage.info('已取消操作');
    });
};

// 重置密码
const handleResetPassword = (row) => {
  ElMessageBox.confirm(
    '确定要重置该学生的密码吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage.success('密码重置成功');
    })
    .catch(() => {
      ElMessage.info('已取消重置');
    });
};

// 删除学生
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该学生吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage.success('删除成功');
    })
    .catch(() => {
      ElMessage.info('已取消删除');
    });
};
</script>

<style scoped>
.student-manage {
  padding: 20px;
}

.search-bar {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-button {
  margin-right: 10px;
}

:deep(.el-table) {
  margin-top: 20px;
}
</style>
